<template>
  <div class="template-box">
    <el-row :gutter="20" class="el-card-container">
      <el-col :span="6">
        <el-card>
          <div style="text-align: center">服务配置列表</div>
          <el-divider/>
          <el-table size="small" :data="gameConfig.serverType" stripe style="width: 100%;height: 250px;">
            <el-table-column prop="key" align="center" label="序号" width="100" />
            <el-table-column prop="value" align="center" label="标题" width="120" />
            <el-table-column fixed="right" align="center" label="操作">
              <template #default="scope">
                <el-popconfirm
                    confirm-button-type="danger"
                    confirm-button-text="删除"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    title="是否确认删除?"
                    @confirm="deleteRow(1,scope.$index)"
                >
                  <template #reference>
                    <el-button bg
                               link
                               type="danger"
                               size="small">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button
                    bg
                    link
                    type="primary"
                    size="small"
                    @click.prevent="editRow(1,scope.$index)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="addGameConfig(1,'添加区服')" class="mt-4" style="width: 100%; margin-top: 5px;">
            添加区服
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="text-align: center">任务配置列表</div>
          <el-divider/>
          <el-table size="small" :data="gameConfig.taskType" stripe style="width: 100%;height: 250px;">
            <el-table-column prop="key" align="center" label="序号" width="100" />
            <el-table-column prop="value" align="center" label="标题" width="120" />
            <el-table-column fixed="right" align="center" label="操作">
              <template #default="scope">
                <el-popconfirm
                    confirm-button-type="danger"
                    confirm-button-text="删除"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    title="是否确认删除?"
                    @confirm="deleteRow(2,scope.$index)"
                >
                  <template #reference>
                    <el-button bg link type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button
                    bg
                    link
                    type="primary"
                    size="small"
                    @click.prevent="editRow(2,scope.$index)">
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="addGameConfig(2,'添加任务')" class="mt-4" style="width: 100%; margin-top: 5px;flex-shrink: 0">
            添加任务
          </el-button>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="text-align: center">战斗配置列表</div>
          <el-divider/>
          <div style="height: 250px;">
            <div style="width: 100%;height: auto;display: flex; flex-direction: row; align-items: center;">
              <el-select
                  v-model="value"
                  placeholder="选择分类"
                  style="width: 100%;flex: 1;">
                <el-option v-for="(item,idx) in gameConfig.configTemplate" :label="item.key" :value="idx" :key="idx"
                />
              </el-select>
              <el-button link style="margin-left: 10px" type="danger" class="mt-4">
                删除
              </el-button>
            </div>
          </div>
          <div style="width: 100%;height: auto;display: flex; flex-direction: row; margin-top: 5px;flex-shrink: 0">
            <el-button class="mt-4" style="flex: 1;">
              添加分类
            </el-button>
            <el-button class="mt-4" style="flex: 1;">
              添加配置
            </el-button>
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>


  <el-dialog align-center v-model="centerDialogVisible" :title="dialogTitle" width="400" center>
    <div>
      <div>
        <el-input
            v-model="configTemplate.key"
            placeholder="请输入标识">
          <template #prepend>标识</template>
        </el-input>
      </div>
      <el-divider/>
      <div>
        <el-input
            v-model="configTemplate.value"
            placeholder="请输入标题">
          <template #prepend>标题</template>
        </el-input>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" style="width: 100%;height: auto;display: flex; flex-direction: row; margin-top: 5px;flex-shrink: 0">
        <el-button @click="centerDialogVisible = false" class="mt-4" style="flex: 1;">
          取  消
        </el-button>
        <el-button :disabled="!configTemplate.key||!configTemplate.value" type="primary" @click="saveConfig" class="mt-4" style="flex: 1;">
          保 存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {getGameConfigInfo, updateGameConfigInfo} from "@/api/game/gameConfig";
import {InfoFilled} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
const value = ref('')
let editIdx=-1;
let isSave=true
const dialogTitle= ref('')
//弹窗保存按钮执行标记
let saveType=1;
const configTemplate = ref({
  key: '',
  value: ''
})
const centerDialogVisible = ref(false)
const addGameConfig=(type,title)=>{
  clearConfigInfo();
  isSave=true
  centerDialogVisible.value = true;
  dialogTitle.value=title;
  saveType=type;
}
const gameConfig = ref({
  serverType: [],
  taskType: [],
  configTemplate: []
})

onMounted(() => {
  getGameConfig()
})
const getGameConfig = () => {
  getGameConfigInfo().then(res => {
    gameConfig.value = res.data
    console.log(gameConfig.value)
  })
}

const clearConfigInfo = () => {
  configTemplate.value.key = ''
  configTemplate.value.value = ''
}
const deleteRow = (flag,idx) => {
  if (flag===1){
    gameConfig.value.serverType.splice(idx)
  }else if (flag===2){
    gameConfig.value.taskType.splice(idx)
  }
}
const editRow = (flag,idx) => {
  if (flag===1){
    configTemplate.value.key = gameConfig.value.serverType[idx].key
    configTemplate.value.value = gameConfig.value.serverType[idx].value
  }else if (flag===2){
    configTemplate.value.key = gameConfig.value.taskType[idx].key
    configTemplate.value.value = gameConfig.value.taskType[idx].value
  }
  isSave=false;
  saveType=flag;
  editIdx=idx;
  centerDialogVisible.value=true;
}
//isSave为true则为添加，false则为编辑
const saveConfig=() => {
  centerDialogVisible.value = false
  console.log(saveType)
  if (saveType===1){
    if (isSave){
      gameConfig.value.serverType.push({
        key: configTemplate.value.key,
        value: configTemplate.value.value
      })
    }else {
      gameConfig.value.serverType[editIdx].key = configTemplate.value.key
      gameConfig.value.serverType[editIdx].value = configTemplate.value.value
      updateGameInfo();
    }
    console.log("保存区服")
  }else if (saveType===2){
    if (isSave){
      gameConfig.value.taskType.push({
        key: configTemplate.value.key,
        value: configTemplate.value.value
      })
    }else {

      gameConfig.value.taskType[editIdx].key = configTemplate.value.key
      gameConfig.value.taskType[editIdx].value = configTemplate.value.value
      updateGameInfo();
    }
    console.log("保存任务")
  }
}

const updateGameInfo=()=>{
  updateGameConfigInfo(gameConfig.value).then(res => {
    ElMessage({
      message: res.message,
      type: res.code===200?'success':'error',
    })
  })
}
</script>
<style>
.template-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

}
.el-divider--horizontal{
  margin: 10px 0;
}
.el-card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
  gap: 20px;
}

.el-card-container .el-col {
  flex: 1;
  display: flex;
  min-width: 400px;
  flex-direction: column;
  justify-content: space-between;
}
</style>
